<template>
  <div class="app-container" style="width: 100%;height: calc(100% - 10px)">
    <div
        v-loading="searchLoading"
      class="filter-container"
      :style="{height:!showFile?'100%':'auto'}"
        v-show="tec_type!='comprehensiveFile'"
      style="width: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column"
    >
      <div
        style="width: 68%;display: flex;align-items: center;justify-content: center;flex-direction: column ;min-width: 800px"
      >
        <div v-if="!showFile" style="display: flex;align-items: center;justify-content: center">
          <div style="padding-bottom: 16px;display: flex">
            <img src="../../assets/login/LOGOx.png" class="sidebar-logo">
            <h3 style="color: #333333;margin-left: 16px">TEF&MFT Knowledge Base</h3>
          </div>
        </div>
        <div
            v-if="!showFile"

            style="width: 100%;display: flex;flex-wrap: wrap;align-content: flex-start;padding: 10px 0px"
        >

          <el-radio-group v-model="tec_type" @change="changeType"  style="width: 100%;display: flex;flex-wrap: wrap;align-content: center;justify-content: center">
            <el-radio class="my-radio" v-for="(item,key) in cats" :key="key" :label="item.dict_value" style="margin: 5px 5px 0px 0px"      border>{{item.dict_key}}</el-radio>
            <el-radio class="my-radio" style="margin: 5px 5px 0px 0px"   label="publicFile" border>公用知识</el-radio>
            <el-radio class="my-radio" style="margin: 5px 5px 0px 0px"   label="comprehensiveFile" border>精确查找</el-radio>
            <el-radio class="my-radio" style="margin: 5px 5px 0px 0px"   label="ai" border>AI机器人</el-radio>
          </el-radio-group >
        </div>
        <div style="display: flex;width: 100%">
          <el-input
            v-model="searchKey"
            size="large"
            placeholder="请输入搜索内容"
            class="input-with-select"
            @keyup.enter.native="doSearch"
          >

            <el-popover
              slot="prepend"
              placement="bottom-start"
              title=""
              width="350"
              trigger="click"
            >
              <div style="height: 300px;overflow-y: scroll">
                <el-row>
                  <el-col :span="24" style="padding-bottom: 16px">
                    <el-checkbox
                        v-model="allcheck"
                        style="width: 150px;text-overflow:ellipsis"
                        @change="checkedall"
                    >
                      {{$t('bs.isSelectAll')}}
                    </el-checkbox>
                  </el-col>
                  <el-col v-for="(item,key) in techonlogyList" :key="item.id" :span="12" style="margin-bottom: 5px">
                    <el-tooltip class="item" effect="dark" :content="item.technology_name" placement="bottom-end">
                      <el-checkbox
                        v-model="item.checked"
                        style="width: 150px;text-overflow:ellipsis"
                        border
                        @change="getSelectList"
                      >
                        {{ item.technology_name.substring(0,8) }}
                      </el-checkbox>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </div>
              <el-button slot="reference">{{$t('bs.selectProcess')}}</el-button>
            </el-popover>

          </el-input>
          <el-button icon="el-icon-search" style="margin-left: 10px" @click="doSearch">{{$t('bs.search')}}</el-button>
<!--          <el-button icon="el-icon-delete" @click="resetSearch">{{$t('bs.reset')}}</el-button>-->
        </div>
        <div style="width: 100%;margin-top: 10px;display: flex;align-items: center">

          <div style="display: flex;align-items: center">
            <span style="color: #666666;width: 100px;">{{$t('bs.searchScope')}}:</span>
            <el-checkbox-group v-model="checkList" style="width: 100%">
              <el-checkbox v-for="(item,key) in scopes" :key="key" :label="item.key" >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="display: flex;align-items: center;margin-left: 36px">
          <span style="color: #666666;width: 100px;">{{$t('bs.searchLogic')}}:</span>
          <el-radio-group v-model="logic" size="mini">
            <el-radio label="and" border>and</el-radio>
            <el-radio label="or" border >or</el-radio>
          </el-radio-group>
          </div>
        </div>

        <div
            v-if="!showFile"

            style="width: 100%;min-height:300px;display: flex;flex-wrap: wrap;align-content: flex-start;padding: 10px 0px"
        >

<!--          <el-radio-group v-model="tec_type" @change="changeType"  style="width: 100%;display: flex;flex-wrap: wrap;align-content: center;justify-content: center">-->
<!--            <el-radio style="margin: 5px 5px 0px 0px"   label="all" border>全部工艺</el-radio>-->
<!--            <el-radio v-for="(item,key) in cats" :key="key" :label="item" style="margin: 5px 5px 0px 0px"      border>{{item}}</el-radio>-->
<!--            <el-radio style="margin: 5px 5px 0px 0px"   label="publicFile" border>公用知识</el-radio>-->
<!--            <el-radio style="margin: 5px 5px 0px 0px"   label="comprehensiveFile" border>精确查找</el-radio>-->
<!--            <el-radio style="margin: 5px 5px 0px 0px"   label="ai" border>AI机器人</el-radio>-->
<!--          </el-radio-group >-->

          <div
              v-for="(item,key) in techonlogyList"
              v-if="item.checked&&!item.hide"
              :key="key"
              class="el-card is-always-shadow"
              style="margin: 5px; width: 100px; height: 100px;"
          >
            <el-tooltip class="item" effect="dark" :content="item.technology_name" placement="bottom-start">
              <div
                  style="width: 100px;height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer;position: relative"
                  @click="changeGyItem(item)"
              >
                <div v-if="!item.checked" style="position: absolute;left:0;top:0;bottom: 0;right: 0;background: rgba(0,0,0,0.5);display: flex;align-items: center;justify-content: center">
                  <div style="position: absolute;top:1px;right: 1px;">
                    <i class="el-icon-circle-close" style="font-size: 26px;color: #ffffff"  ></i>
                  </div>
                  <span style="font-size: 12px; color: #ffffff">已停用搜索</span>
                </div>
                <div v-else  style="position: absolute;top:1px;right: 1px;">
                  <!--                  <i class="el-icon-success" style="font-size: 26px;color: #1AAD19"  ></i>-->
                </div>
                <div>

                  <div style="width: 100px;height: 50px;display: flex;align-items: center;justify-content: center">
                    <img
                        :src="item.img?item.img:getDefaultImage"
                        style="width: 50px; height: 50px;"
                    >
                  </div>

                </div>
                <div
                    style="margin-top: 10px; white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;width: 90px;text-align: center;font-size: 12px"
                >{{ item.technology_name }}
                </div>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>


    </div>



    <div class="is-always-shadow" id="fileViewScroll2" style="width: 100%;overflow-y: hidden;overflow-x: scroll;padding: 8px" :style="{height:tec_type=='comprehensiveFile'?'calc(100vh - 150px)':'calc(100vh - 250px)'}"     v-if="showFile">

        <public-search v-if="tec_type==='publicFile'"
          ref="publicSearchRef"
                       class="el-card is-always-shadow"
          :file-tree="$store.state.fileViewSearch.fileTree"
        />

      <comp-search v-else-if="tec_type==='comprehensiveFile'"
                        ref="compSearchRef"
                   class="el-card is-always-shadow"
                   @reset="resetSearch"

      />
      <file-view-search v-else
                        ref="fileViewSearchRef"
                        class="el-card is-always-shadow"
                        :file-tree="$store.state.fileViewSearch.fileTree"
                        :keyword="searchKey"
                        :scope="checkList.join(',')"
                        :logic="logic"
      />
      </div>

      <el-dialog :show-close="false"   :close-on-press-escape="false" :close-on-click-modal="false" title="工位信息" :visible.sync="dialog" width="800px">

    <advanced-search @ok="doAdvancedSearch" @close="closeAdvancedSearch"/>
      </el-dialog>

  </div>
</template>

<script>
import { fetchList, fetchPv, createArticle, updateArticle, delArticle } from '@/api/article'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import CyTreeSelect from '@/components/CyTreeSelect'
import Template from '@/views/bs/template.vue'
import { getTechonlogyCat, queryFileStation,queryFilePublic  } from '@/api/technology'
import FileViewSearch from '@/views/Knowledge/fileViewSearch.vue'
import splitPane from "vue-splitpane";
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
import PublicSearch from "@/views/Knowledge/publicSearch.vue";
import CompSearch from "@/views/Knowledge/compSearch.vue";
import {fetchDict} from "@/api/common";
import TechnologySelect from "@/views/technologySelect.vue";
import _ from "lodash";
import AdvancedSearch from "@/views/Knowledge/advancedSearch.vue";
const cityOptions = ['文本', '列表', '长文本']
export default {
  name: 'publicfind',
  components: {
    AdvancedSearch,
      TechnologySelect,
    CompSearch,
    PublicSearch, FileViewSearch, Template, CyTreeSelect, Pagination,splitPane,VueDraggableResizable },
  directives: { waves },
  data() {
    return {
      checkList:["name","st_line_name","st_station_number_name"],
      scopes:[
        {key:"name",name:this.$t('bs.fileName'),checked:true},
        {key:"st_line_name",name:'产线',checked:true},
        {key:"st_station_number_name",name:this.$t("bs.stationName"),checked:true},
        {key:"content",name:this.$t("bs.fullText"),checked:true},
      ],
      logic:'and',
        loading:false,
        dialog:false,
        dialogDetail:null,
        activeNames: ['0', '1', '2'],

        listQuery: {
            showSearch:true,
            page_no: 1,
            limit: 20,
            sort: 'id desc',
            station_name: '',
            station_number_name: '',
            technology_type:[],
        },
        queryMap: {
            dept_id: '=',
            cost_id: '=',
            line_id: '=',
            technology_type:'in'
        },
        form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            dept_id: '',
            cost_id: '',
            attrinfo: []
        },
      tec_type:"publicFile",
      width: 200,
      allcheck:false,
      showFile: true,
      searchLoading: false,
      historyList: [],
      searchKey: '',
      techonlogyList: [],
      cats:[],
      selectedList: [],
        depts: [],
        lines: [],
        costs: [],
        technology_type_option: [],
        dev_type_option: [],
        supplierList: []
    }
  },
  computed:{
    getDefaultImage:{
      get:function (){
        return process.env.VUE_APP_BASE_URL+'/static/uploads/2023-11-09/11331699505859.png'
      }
    }
  },

  created() {
    console.log('参数', this.$route.params)
  },
  mounted() {
    fetchDict('工艺分类').then((res) => {
      if (res.data.items) {
        this.cats = res.data.items.filter(item=>item.dict_key)
      }
    })
    getTechonlogyCat().then((res) => {
      let cats=[];
      res.data.items.forEach((item) => {
        if(item.inc_type&&cats.indexOf(item.inc_type)==-1)
        {
          cats.push(item.inc_type)
        }
        item.checked = false
      })

      // this.cats=cats
      this.techonlogyList = res.data.items

      this.changeType('publicFile')

    })
  },
  methods: {
    closeAdvancedSearch(){
      this.dialog=false;
      this.tec_type="all";
    },
    doAdvancedSearch(){
      console.log(this.tec_type);
      // return
      this.showFile=true;
      this.dialog=false;
      this.$nextTick(()=>{
        setTimeout(()=>{
        //  this.$refs.compSearchRef.handleFilter()
        },200)

      })


    },
      cancelFormDetail(){
          this.dialogDetail=false;
      },
      cancelForm() {
          this.loading = false
          this.dialog = false
          clearTimeout(this.timer)
      },
      handleFilterReset() {
          this.listQuery = {
              page_no: 1,
              limit: 20,
              sort: 'id desc',
              technology_type:[],
              where: {}
          }
          this.form.attrinfo = _.cloneDeep(this.station_attr)
          if(this.$refs.technologySelectRef){
              this.$refs.technologySelectRef.initData()
          }

          this.$refs.technologySelectRef2.initData()

          this.$emit("reset")
          // this.handleFilter()

      },
      handleFilter() {
          const ext_keys = ['limit', 'where', 'page_no', 'sort']
          this.listQuery.page_no = 1
          const queryParma = {}
          const listkeys = Object.keys(this.listQuery)

          for (const i in listkeys) {
              if (ext_keys.indexOf(listkeys[i]) == -1 && this.listQuery[listkeys[i]]) {
                  console.log('查询', listkeys[i], isNaN(listkeys[i]))
                  let operator = '='
                  let value = this.listQuery[listkeys[i]]
                  if (!this.queryMap[listkeys[i]]) {
                      if (isNaN(listkeys[i])) {
                          operator = 'like'
                          value = '%' + this.listQuery[listkeys[i]] + '%'
                      }
                      if (!queryParma['and']) {
                          queryParma['and'] = []
                      }
                      queryParma['and'].push({ field: listkeys[i], operator: operator, value: value })
                  } else {
                      if (this.queryMap[listkeys[i]] == 'like') {
                          operator = 'like'
                          value = '%' + this.listQuery[listkeys[i]] + '%'
                      }
                      if (this.queryMap[listkeys[i]] == 'in') {
                          operator = 'in'
                          console.log("有in，需要组合1",this.listQuery[listkeys[i]])
                          value = this.listQuery[listkeys[i]].join(",")
                      }


                      if (!queryParma['and']) {
                          queryParma['and'] = []
                      }
                      if(value){
                        queryParma['and'].push({ field: listkeys[i], operator: operator, value: value })
                      }

                  }
              }
          }
          let querym = []
          const keys = Object.keys(queryParma)
          for (var i = 0; i < keys.length; i++) {
              queryParma[keys[i]].map((item) => {
                  querym.push(item)
              })
          }


          const parma = { data: querym }
          console.log('查询参数2', querym)

          const attinfo = this.form.attrinfo

          const att = []
          attinfo.map((item) => {
              if (item.attr_val) {
                  let op = '='
                  const filed = item.attr_id
                  let value = item.attr_val
                  if (item.list_val.length == 0) {
                      op = 'like'
                      value = '%' + value + '%'
                  }
                  att.push({ field: filed, value: value, operator: op })
              }
          })
          parma['attr'] = att

          this.list = []

          this.listQuery['where'] = queryParma

          this.getDept2(parma)
      },
    handleResizing(newWidth) {
      this.width = newWidth; // 当拖拽改变宽度时，更新width属性
    },
    changeType(type)
    {
      if(type=='comprehensiveFile')
      {
        this.dialog=true
        return;
      }

      if(type=='all')
      {
        this.techonlogyList.forEach((item)=>{
          item.checked=true;
          item.hide=false;
        })

      }else{
        if(type=='publicFile')
        {
          this.showFile=true
          this.doSearch()
          return;
        }


      this.techonlogyList.forEach((item)=>{
        if(item.inc_type==type)
        {
          item.checked=true;
          item.hide=false;
        }else{
          item.checked=false;
          item.hide=true;
        }
      })
      }
      this.getSelectList()
    },
    checkedall(val){
      if(val){
        this.techonlogyList.map((item)=>{
          item.checked=true;
        })
      }else{
        this.techonlogyList.map((item)=>{
          item.checked=false;
        })
      }
      this.getSelectList()

    },
    changeGyItem(item){
      console.log("点的",item,this.techonlogyList)
      this.techonlogyList.forEach((it)=>{

        if(item.id==it.id)
        {
          it.checked=true;
        }else{


          it.checked=false;
        }
      })
      this.$nextTick(()=>{
        this.getSelectList();
            this.doSearch();
      })

     // item.checked=!item.checked;

      //this.getSelectList()
    },
    getSelectList() {
      this.selectedList = this.techonlogyList.filter(item => item.checked === true)
    },
    resetSearch() {
      this.searchKey = ''
      this.tec_type='all'
      this.techonlogyList.forEach((item) => {
        item.checked = true
      })
      this.getSelectList()
      this.showFile = false

    },
    mergeChildren(tree,parent) {
      console.log("继承权限",tree,parent)
      if (!tree.children) {
        tree['children'] = []
      }
      if (!tree.filelist) {
        tree['filelist'] = []
      }
      if(!tree.width)
      {
        tree.width=200;
      }
      if(!tree.promise&&parent&&parent.promise)
      {
        console.log("继承权限")
        tree.promise=parent.promise
      }
      tree['newChildren'] = tree.children.concat(tree.filelist)
      tree['selectKey'] = null
      for (var i = 0; i < tree.newChildren.length; i++) {
        this.mergeChildren(tree.newChildren[i],tree)
      }
    },
    doSearch() {


        if(this.checkList.length==0)
        {
          this.$message.error("请选择搜索范围");
          return;
        }

      console.log('类型',this.tec_type);


      this.searchLoading = true
      this.$store.state.fileViewSearch.fileTree={}

      if(this.tec_type=='publicFile'){
        queryFilePublic(this.searchKey,this.checkList.join(","),this.logic).then((res) => {
          if (res.data&&res.data.length > 0) {
            this.showFile = true
            if(res.data&&res.data.length>0&&res.data[0]&&res.data[0].length>0){

              this.mergeChildren(res.data[0][0])
              this.$store.state.fileViewSearch.fileTree = res.data[0][0]
            }

            console.log('搜索结果',  this.$store.state.fileViewSearch.fileTree)
          } else {
            this.$message.info('没有搜索到结果')
          }
        }).finally(() => {
          this.searchLoading = false
        })
      }else{
        var ids = this.selectedList.map(item => item.id)
        queryFileStation(this.searchKey, ids,this.checkList.join(","),this.logic).then((res) => {
          if (res.data&&res.data.length > 0) {
            // this.showFile = true
            this.$store.state.fileViewSearch.stationList = res.data
            this.$nextTick(()=>{
              this.showFile=true;
            })


            console.log('搜索结果', this.showFile)
          } else {
            this.$message.info('没有搜索到结果')
          }
        }).finally(() => {
          this.searchLoading = false
        })
      }

    }

  }
}
</script>
<style scoped="scoped" type="scss">
.pagination-container {
  padding: 0px;
  padding-bottom: 16px;
}
.my-resize{
  display: inline-block;position: static;border:none;border-right: 5px solid #dddddd;
}
.my-radio /deep/ .el-radio__input{
  display: none;
}

.my-resize /deep/ .handle-mr{
  border: none;
  background: #eeeeee;
  height: calc(100% + 10px);
  top: 0px;
  width: 5px;
  right: -5px;
  display: block !important;
}
.hoverbutton {
  width: 70px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  border-radius: 3px;
}

.hoverbutton:hover {
  border: 1px solid #999999;
}

.setcheckbox .el-checkbox {
  margin-bottom: 10px;
}

.searchform .el-form-item {
  margin-bottom: 0px;
  min-width: 280px;
}

.el-card__body {
  padding: 10px !important;
}
</style>

